<template>
    <div>
      <!--分标签页-->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="新增课程申请" name="first"></el-tab-pane>
            <el-tab-pane label="修改课程申请" name="second"></el-tab-pane>
            <el-tab-pane label="删除课程申请" name="third"></el-tab-pane>
        </el-tabs>
        <!--新增-->
        <div v-if="tabName==='first'">
            <h3 style="color: slateblue">新增课程申请</h3>
            <el-table title="新增课程申请"
                      ref="addTable"
                      :data="addTableData"
                      border
                      stripe
                      style="width: fit-content; margin-left: 10px">
              <el-table-column
                  prop="id"
                  label="申请序号"
                  width="60">
              </el-table-column>

              <el-table-column
                  prop="courseId"
                  label="课程编号"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="courseName"
                  label="课程名称"
                  width="140">
              </el-table-column>
               <el-table-column
                   prop="type"
                   label="课程类型"
                   width="100">
               </el-table-column>
              <el-table-column
                  prop="school"
                  label="授课学院"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="major"
                  label="授课专业"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="credit"
                  label="学分"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="hour"
                  label="学时"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="time"
                  label="上课时间"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="location"
                  label="上课地点"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="teacher"
                  label="申请教师"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="volume"
                  label="选课容量"
                  width=100>
              </el-table-column>
              <el-table-column
                  prop="intro"
                  label="课程简介"
                  width="140">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                <template slot-scope="scope">
                  <el-button @click="addFormHandle(scope.row.id)" type="text" >审批</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <el-dialog title="新增课程申请信息" :visible.sync="addVisible" width="600px" @closed="resetAddForm('addForm')">
            <el-form :model="addForm" :rules="addFormRules" ref="addForm">

                <el-form-item label="申请序号" prop="id" label-width="100px">
                    <el-input v-model="addForm.id" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程编号" prop="courseId" label-width="100px">
                    <el-input v-model="addForm.courseId" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName" label-width="100px">
                    <el-input v-model="addForm.courseName" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="授课学院" prop="school" label-width="100px">
                    <el-input v-model="addForm.school" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="授课专业" prop="major" label-width="100px">
                    <el-input v-model="addForm.major" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学分" prop="credit" label-width="100px">
                    <el-input v-model="addForm.credit" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学时" prop="hour" label-width="100px">
                    <el-input v-model="addForm.hour" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上课时间" prop="time" label-width="100px">
                    <el-input v-model="addForm.time" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上课地点" prop="location" label-width="100px">
                    <el-input v-model="addForm.location" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请教师" prop="teacher" label-width="100px">
                    <el-input v-model="addForm.teacher" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程简介" prop="intro" label-width="100px">
                    <el-input v-model="addForm.intro" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <!--                <el-form-item label="" prop="pass" label-width="100px">-->
                <!--&lt;!&ndash;                    <el-input v-model="addForm.intro" readonly disabled autocomplete="off"></el-input>&ndash;&gt;-->
                <!--                    <el-radio v-model="addForm.pass" label="1">同意</el-radio>-->
                <!--                    <el-radio v-model="addForm.pass" label="0">否决</el-radio>-->
                <!--                </el-form-item>-->
            </el-form>
            <!--按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="deleteAddForm('addForm')">否决</el-button>
                <el-button type="primary" @click="submitAddForm('addForm')">同意</el-button>
            </div>
        </el-dialog>

        <!--删除-->
        <div v-if="tabName==='second'">
            <h3 style="color: slateblue">删除课程申请</h3>
            <el-table title="删除课程申请"
                      ref="deleteTable"
                      :data="deleteTableData"
                      border
                      stripe
                      style="width: fit-content; margin-left: 10px">
              <el-table-column
                  prop="id"
                  label="申请序号"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="target"
                  label="课程id"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="courseId"
                  label="课程编号"
                  width="140">
              </el-table-column>
                <el-table-column
                        prop="type"
                        label="课程类型"
                        width="100">
                </el-table-column>
              <el-table-column
                  prop="courseName"
                  label="课程名称"
                  width="140">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                <!--                id还是courseid？？？-->
                <template slot-scope="scope">
                  <el-button @click="deleteFormHandle(scope.row.id)" type="text">审批</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <el-dialog title="删除课程申请信息" :visible.sync="delVisible" width="600px" @closed="resetDeleteForm('deleteForm')">

            <el-form :model="deleteForm" :rules="deleteFormRules" ref="deleteForm">
                <!--                <el-form-item label="申请序号" prop="id" label-width="100px">-->
                <!--                    <el-input v-model="deleteForm.id" readonly disabled autocomplete="off"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="课程id" prop="target" label-width="100px">
                    <el-input v-model="deleteForm.target" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程编号" prop="courseId" label-width="100px">
                    <el-input v-model="deleteForm.courseId" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName" label-width="100px">
                    <el-input v-model="deleteForm.courseName" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="pass" label-width="100px">
                    <!--                    <el-input v-model="addForm.intro" readonly disabled autocomplete="off"></el-input>-->
                    <el-radio v-model="deleteForm.pass" label="1">同意</el-radio>
                    <el-radio v-model="deleteForm.pass" label="0">否决</el-radio>
                </el-form-item>

            </el-form>
            <!--按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetDeleteForm('deleteForm')">取 消</el-button>
                <el-button type="primary" @click="submitDeleteForm('deleteForm')">提交</el-button>
            </div>
        </el-dialog>
        <!--修改-->
        <div v-if="tabName==='third'">
            <h3 style="color: slateblue">修改课程信息申请</h3>
            <el-table title="修改课程信息申请"
                      ref="editTable"
                      :data="editTableData"
                      border
                      stripe
                      style="width: fit-content; margin-left: 10px">
              <el-table-column
                  prop="id"
                  label="申请序号"
                  width="60">
              </el-table-column>
              <el-table-column
                  prop="target"
                  label="课程id"
                  width="60">
              </el-table-column>
              <el-table-column
                  prop="courseId"
                  label="课程编号"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="courseName"
                  label="课程名称"
                  width="140">
              </el-table-column>
                <el-table-column
                        prop="type"
                        label="课程类型"
                        width="100">
                </el-table-column>
              <el-table-column
                  prop="school"
                  label="学院"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="major"
                  label="专业"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="credit"
                  label="学分"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="hour"
                  label="学时"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="time"
                  label="上课时间"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="location"
                  label="上课地点"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="teacher"
                  label="授课教师"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="intro"
                  label="课程简介"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="volume"
                  label="选课容量"
                  width=100>
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label=""
                  width="100">
                <template slot-scope="scope">
                  <el-button @click="editFormHandle(scope.row.id)" type="text">审批</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <el-dialog title="编辑课程申请信息" :visible.sync="editVisible" width="600px" @closed="resetEditForm('editForm')">

            <el-form :model="editForm" :rules="editFormRules" ref="editForm">

                <el-form-item label="申请序号" prop="id" label-width="100px">
                    <el-input v-model="editForm.id" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程id" prop="target" label-width="100px">
                    <el-input v-model="editForm.target" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程编号" prop="courseId" label-width="100px">
                    <el-input v-model="editForm.courseId" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName" label-width="100px">
                    <el-input v-model="editForm.courseName" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="授课学院" prop="school" label-width="100px">
                    <el-input v-model="editForm.school" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="授课专业" prop="major" label-width="100px">
                    <el-input v-model="editForm.major" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学分" prop="credit" label-width="100px">
                    <el-input v-model="editForm.credit" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学时" prop="hour" label-width="100px">
                    <el-input v-model="editForm.hour" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上课时间" prop="time" label-width="100px">
                    <el-input v-model="editForm.time" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上课地点" prop="location" label-width="100px">
                    <el-input v-model="editForm.location" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="申请教师" prop="teacher" label-width="100px">
                    <el-input v-model="editForm.teacher" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程简介" prop="intro" label-width="100px">
                    <el-input v-model="editForm.intro" readonly disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="pass" label-width="100px">
                    <el-radio v-model="editForm.pass" label="1">同意</el-radio>
                    <el-radio v-model="editForm.pass" label="0">否决</el-radio>
                </el-form-item>

            </el-form>
            <!--按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetEditForm('editForm')">取 消</el-button>
                <el-button type="primary" @click="submitEditForm('editForm')">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "TeaCoursesCheck",
        data(){
            return {
                addTableData:[],
                deleteTableData:[],
                editTableData:[],

                addForm:{},
                deleteForm:{},
                editForm:{},

                addFormRules:{},
                deleteFormRules:{
                    pass:[
                        {required: true, message: '请作出审批', trigger: 'blur'},
                    ]
                },
                editFormRules:{
                    pass:[
                        {required: true, message: '请作出审批', trigger: 'blur'},
                    ]
                },

                addVisible: false,
                delVisible: false,
                editVisible: false,

                activeName: 'second',
                tabName: 'first',
            }
        },
        created() {
            this.getAddList();
            this.getDeleteList();
            this.getEditList();
        },
        methods:{
            //得到新增课程申请
            getAddList(){
                this.$axios.get('sys/course/list').then(res => {
                    // this.addTableData = res.data.data
                    var newData=[]
                    for (var i=0;i<res.data.data.length;i++) {
                        //判断课程状态
                        if (res.data.data[i].statu === 1) {
                            var data = {}
                            var mapTime = [], mapSemester = [], mapLocation = [], mapMajor = []
                            data.id = res.data.data[i].id

                            for (var key in res.data.data[i].semester) {
                                mapSemester.push(res.data.data[i].semester[key])
                                mapSemester.push(',')
                            }
                            mapSemester.pop()
                            data.semester = mapSemester

                            data.courseId = res.data.data[i].courseId
                            data.courseName = res.data.data[i].courseName
                            if (res.data.data[i].type === 0) {
                                data.type = '通选课程'
                            } else {
                                if (res.data.data[i].type === 1)
                                    data.type = '专选课程'
                            }

                            //得到数据时直接得到schoolName
                            data.schoolName = res.data.data[i].schoolName

                            for (var key in res.data.data[i].major) {
                                mapMajor.push(res.data.data[i].major[key])
                                mapMajor.push(',')
                            }
                            mapMajor.pop()
                            data.major = mapMajor

                            data.credit = res.data.data[i].credit
                            data.hour = res.data.data[i].hour

                            for (var key in res.data.data[i].time) {
                                mapTime.push(res.data.data[i].time[key])
                                mapTime.push(',')
                            }
                            mapTime.pop()
                            data.time = mapTime

                            // for (var key in res.data.data[i].location){
                            //     mapLocation.push(res.data.data[i].location[key])
                            //     mapLocation.push(',')
                            // }
                            // mapLocation.pop()
                            // data.location = mapLocation
                            if (res.data.data[i].location !== null) {
                                data.location = res.data.data[i].location.courseLocation
                            }

                            data.teacher = res.data.data[i].teacher
                            data.teacherId = res.data.data[i].teacherId
                            data.intro = res.data.data[i].intro
                            data.volume = res.data.data[i].volume
                            data.currentNum = res.data.data[i].currentNum

                            newData.push(data)
                        }
                        // console.log('courseData',this.courseData)
                    }
                    this.addTableData = newData
                })

            },
            //得到删除课程申请
            getDeleteList(){
                this.$axios.get('sys/course/list').then(res => {
                    // this.deleteTableData = res.data.data
                    var newData=[]
                    for (var i=0;i<res.data.data.length;i++) {
                        //判断课程状态
                        if (res.data.data[i].statu === 2) {
                            var data = {}
                            var mapTime = [], mapSemester = [], mapLocation = [], mapMajor = []
                            data.id = res.data.data[i].id

                            for (var key in res.data.data[i].semester) {
                                mapSemester.push(res.data.data[i].semester[key])
                                mapSemester.push(',')
                            }
                            mapSemester.pop()
                            data.semester = mapSemester

                            data.courseId = res.data.data[i].courseId
                            data.courseName = res.data.data[i].courseName
                            if (res.data.data[i].type === 0) {
                                data.type = '通选课程'
                            } else {
                                if (res.data.data[i].type === 1)
                                    data.type = '专选课程'
                            }

                            //得到数据时直接得到schoolName
                            data.schoolName = res.data.data[i].schoolName

                            for (var key in res.data.data[i].major) {
                                mapMajor.push(res.data.data[i].major[key])
                                mapMajor.push(',')
                            }
                            mapMajor.pop()
                            data.major = mapMajor

                            data.credit = res.data.data[i].credit
                            data.hour = res.data.data[i].hour

                            for (var key in res.data.data[i].time) {
                                mapTime.push(res.data.data[i].time[key])
                                mapTime.push(',')
                            }
                            mapTime.pop()
                            data.time = mapTime

                            // for (var key in res.data.data[i].location){
                            //     mapLocation.push(res.data.data[i].location[key])
                            //     mapLocation.push(',')
                            // }
                            // mapLocation.pop()
                            // data.location = mapLocation
                            if (res.data.data[i].location !== null) {
                                data.location = res.data.data[i].location.courseLocation
                            }

                            data.teacher = res.data.data[i].teacher
                            data.teacherId = res.data.data[i].teacherId
                            data.intro = res.data.data[i].intro
                            data.volume = res.data.data[i].volume
                            data.currentNum = res.data.data[i].currentNum

                            newData.push(data)
                        }
                        // console.log('courseData',this.courseData)
                    }
                    this.deleteTableData = newData
                })
            },
            //得到编辑课程申请
            getEditList(){
                this.$axios.get('sys/course/list').then(res => {
                    // this.editTableData = res.data.data
                    var newData=[]
                    for (var i=0;i<res.data.data.length;i++) {
                        //判断课程状态
                        if (res.data.data[i].statu === 3) {
                            var data = {}
                            var mapTime = [], mapSemester = [], mapLocation = [], mapMajor = []
                            data.id = res.data.data[i].id

                            for (var key in res.data.data[i].semester) {
                                mapSemester.push(res.data.data[i].semester[key])
                                mapSemester.push(',')
                            }
                            mapSemester.pop()
                            data.semester = mapSemester

                            data.courseId = res.data.data[i].courseId
                            data.courseName = res.data.data[i].courseName
                            if (res.data.data[i].type === 0) {
                                data.type = '通选课程'
                            } else {
                                if (res.data.data[i].type === 1)
                                    data.type = '专选课程'
                            }

                            //得到数据时直接得到schoolName
                            data.schoolName = res.data.data[i].schoolName

                            for (var key in res.data.data[i].major) {
                                mapMajor.push(res.data.data[i].major[key])
                                mapMajor.push(',')
                            }
                            mapMajor.pop()
                            data.major = mapMajor

                            data.credit = res.data.data[i].credit
                            data.hour = res.data.data[i].hour

                            for (var key in res.data.data[i].time) {
                                mapTime.push(res.data.data[i].time[key])
                                mapTime.push(',')
                            }
                            mapTime.pop()
                            data.time = mapTime

                            // for (var key in res.data.data[i].location){
                            //     mapLocation.push(res.data.data[i].location[key])
                            //     mapLocation.push(',')
                            // }
                            // mapLocation.pop()
                            // data.location = mapLocation
                            if (res.data.data[i].location !== null) {
                                data.location = res.data.data[i].location.courseLocation
                            }

                            data.teacher = res.data.data[i].teacher
                            data.teacherId = res.data.data[i].teacherId
                            data.intro = res.data.data[i].intro
                            data.volume = res.data.data[i].volume
                            data.currentNum = res.data.data[i].currentNum

                            newData.push(data)
                        }
                        // console.log('courseData',this.courseData)
                    }
                    this.editTableData = newData
                })

            },
            //新增课程申请的弹窗内信息获取
            addFormHandle(id) {
                console.log(id)
                this.$axios.post("/sys/course/apply/single?", {id: id}).then(res => {
                    this.addForm = res.data.data
                    this.addVisible = true
                })
            },
            //删除课程申请的弹窗内信息获取
            deleteFormHandle(id) {
                this.$axios.post("/sys/course/apply/single?", {id: id}).then(res => {
                    this.deleteForm = res.data.data
                    this.delVisible = true
                })
            },
            // 编辑课程申请的弹窗内信息获取
            editFormHandle(id) {
                this.$axios.post("/sys/course/apply/single?", {id: id}).then(res => {
                    this.editForm = res.data.data
                    this.editVisible = true
                })
            },
            // deleteHandle(id) {
            //     // this.$axios.post("/sys/user/delete/" + username).then(res => {
            //     //     console.log(res)
            //     //     this.$message({
            //     //         showClose: true,
            //     //         message: '删除成功',
            //     //         type: 'success',
            //     //         onClose: () => {
            //     //             this.getMemberList()
            //     //             //刷新一下
            //     //             window.location.reload();
            //     //         }
            //     //     });
            //     // })
            //     this.$axios.post("/sys/user/info?", {id: id}).then(res => {
            //         this.deleteForm = res.data.data
            //         this.delVisible = true
            //     })
            // },
            //重设表单
            resetAddForm(formName) {
                this.$refs[formName].resetFields();
                this.addForm = {}
                this.addVisible = false
            },
            resetDeleteForm(formName) {
                this.$refs[formName].resetFields();
                this.deleteForm = {}
                this.delVisible = false
            },
            resetEditForm(formName) {
                this.$refs[formName].resetFields();
                this.editForm = {}
                this.editVisible = false
            },
            //提交表单
            submitAddForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/sys/course/save/pass',this.addForm)
                            .then(res => {
                                console.log(res.data)
                                this.resetAddForm(formName)
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，操作成功',
                                    type: 'success',
                                    onClose: () => {
                                        this.getAddList()
                                    }
                                });
                            })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                });
            },
            deleteAddForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                                url: '/sys/course/apply/deletelist',
                                method: 'POST',
                                params: {
                                    id: this.addForm.id
                                }
                            }
                        ).then(res => {
                            // alert("选择了新的院系，现在在选择专业")
                            this.resetAddForm(formName)
                            this.$message({
                                showClose: true,
                                message: '恭喜你，删除课程成功',
                                type: 'success',
                                onClose: () => {
                                    this.getAddList()
                                }
                            });
                        })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                });
            },
            //提交删除表单
            submitDeleteForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('sys/course/delete', this.deleteForm)
                            .then(res => {
                                this.resetEditForm(formName)
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，操作成功',
                                    type: 'success',
                                    onClose: () => {
                                        this.getDeleteList()
                                    }
                                });
                            })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                });
            },
            //提交编辑表单
            submitEditForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('sys/course/update', this.editForm)
                            .then(res => {
                                console.log('编辑表单',this.editForm.pass)
                                this.resetEditForm(formName)
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，操作成功',
                                    type: 'success',
                                    onClose: () => {
                                        this.getEditList()
                                    }
                                });
                            })
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                });
            },

            //分标签页用的
            handleClick(tab, event) {
              this.tabName = tab.name;
            }


        }
    }
</script>

<style scoped>

</style>